<template>
  <div class="home-page">
    <nav-bar title="网格员专干" theme="white" :leftArrow="false" :fixed="false" message></nav-bar>
    <van-search
      v-model="value"
      placeholder="搜索信息"
      background="rgba(255,255,255,0)"
      :left-icon="searchLeftIcon"
      clearable
    />
    <div class="home-entry-container">
      <div class="home-entry-content">
        <van-row>
          <van-col span="6" @click="routerClick(item)" v-for="(item, key) in entryBar" align="center" :key="key">
            <div class="home-entry-item">
              <img :src="item.iconPath" alt="" />
              <p>{{ item.text }}</p>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="home-entry-shadow"></div>
    </div>
    <div class="home-main-container" v-if="gridPerson.length">
      <p class="home-main-title">网格人员</p>
      <van-row :gutter="8">
        <van-col span="12" v-for="(item, key) in gridPerson" :key="key">
          <gb-card class="home-population-item" :style="{ backgroundColor: gridPersonExtra[key].backgroundColor }">
            <van-row>
              <van-col span="12">
                <van-circle
                  v-model="gridPersonExtra[key].currentRate"
                  :rate="100 - (item.count / item.total) * 100"
                  :color="gridPersonExtra[key].gradientColor"
                  :layer-color="gridPersonExtra[key].layerColor"
                  :stroke-width="80"
                  text="渐变色"
                  size="1.33333rem"
                >
                  <img :src="gridPersonExtra[key].iconPath" alt="" class="population-img" />
                </van-circle>
              </van-col>
              <van-col span="12">
                <p class="total" :style="{ color: gridPersonExtra[key].gradientColor['100%'] }">{{ item.total }}</p>
                <p class="total-text">{{ item.name }}</p>
              </van-col>
            </van-row>
            <div class="line" :style="{ backgroundColor: gridPersonExtra[key].gradientColor['100%'] }"></div>
            <div class="tips" :style="{ color: gridPersonExtra[key].tipsColor }">
              <van-row>
                <van-col span="12">
                  <span class="tips-text">{{ item.countName }}</span>
                </van-col>
                <van-col span="12" align="right">
                  <span class="tips-total">{{ item.count }}</span>
                </van-col>
              </van-row>
            </div>
          </gb-card>
        </van-col>
      </van-row>
    </div>
    <div class="home-main-container">
      <p class="home-main-title">网格事件</p>
      <gb-card shadow class="home-event-container">
        <van-row>
          <van-col span="6" align="center" v-for="(item, key) in gridEvent" :key="key">
            <div class="home-event-item" @click="$router.push(`/event/record?eventStatus=${item.eventStatus}`)">
              <div class="home-event-item__pos">
                <p class="total" :style="{ color: gridEventExtra[key].color }">{{ item.count }}</p>
                <p class="total-text">{{ item.name }}</p>
              </div>
            </div>
          </van-col>
        </van-row>
      </gb-card>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Resident from '@/api/resident'
import Event from '@/api/event'
export default {
  data() {
    return {
      searchLeftIcon: require('@/assets/images/basic/searchbar_search@2x.png'),

      entryBar: [
        {
          text: '居民基础信息',
          iconPath: require('@/assets/images/home/entry_basic_info@2x.png'),
          path: '/resident'
        },
        {
          text: '事件中心',
          iconPath: require('@/assets/images/home/entry_event_center@2x.png'),
          path: '/event'
        },
        {
          text: '巡查走访',
          iconPath: require('@/assets/images/home/entry_visit@2x.png'),
          path: '/inspectvisit'
        },
        // {
        //   text: '视频调用',
        //   iconPath: require('@/assets/images/home/entry_video@2x.png')
        // },
        {
          text: '工地数据',
          iconPath: require('@/assets/images/home/homepage_iconarea_data@2x.png'),
          path: '/siteData'
        },
        {
          text: '网格地图',
          iconPath: require('@/assets/images/home/entry_map@2x.png')
        },
        {
          text: '党建服务',
          iconPath: require('@/assets/images/home/entry_party_service@2x.png'),
          path: '/partyBuilding'
        },
        // {
        //   text: '社区服务',
        //   iconPath: require('@/assets/images/home/entry_service@2x.png')
        // },
        {
          text: '学习自测',
          iconPath: require('@/assets/images/home/entry_self_test@2x.png'),
          path: '/learnTest'
        },
        {
          text: '日常工作',
          iconPath: require('@/assets/images/home/entry_routine@2x.png'),
          path: '/routine'
        }
      ],

      gridPersonExtra: [
        {
          currentRate: 0,
          iconPath: require('@/assets/images/home/population_true@2x.png'),
          gradientColor: {
            '0%': '#3BDAC1',
            '100%': '#3CBDD0'
          },
          tipsColor: '#E2AB56',
          layerColor: 'rgba(60, 189, 208, 0.2)',
          backgroundColor: 'rgba(60, 189, 208, 0.05)'
        },
        {
          currentRate: 0,
          iconPath: require('@/assets/images/home/population_flow@2x.png'),
          gradientColor: {
            '0%': '#3CBDD0',
            '100%': '#3B99DA'
          },
          tipsColor: '#E2AB56',
          layerColor: 'rgba(59, 153, 218, 0.2)',
          backgroundColor: 'rgba(59, 153, 218, 0.05)'
        },
        {
          currentRate: 0,
          iconPath: require('@/assets/images/home/population_abroad@2x.png'),
          gradientColor: {
            '0%': '#E2AB56',
            '100%': '#E28556'
          },
          tipsColor: '#E2AB56',
          layerColor: 'rgba(226, 133, 86, 0.2)',
          backgroundColor: 'rgba(226, 133, 86, 0.05)'
        },
        {
          currentRate: 0,
          iconPath: require('@/assets/images/home/population_care@2x.png'),
          gradientColor: {
            '0%': '#E28556',
            '100%': '#E25656'
          },
          tipsColor: '#3CBDD0',
          layerColor: 'rgba(226, 86, 86, 0.2)',
          backgroundColor: 'rgba(226, 86, 86, 0.05)'
        }
      ],
      gridPerson: [],
      currentRate: 0,

      gridEventExtra: [
        {
          color: '#E28556'
        },
        {
          color: '#3CBDD0'
        },
        {
          color: '#37C2BB'
        },
        {
          color: '#E25656'
        }
      ],
      gridEvent: [],

      value: ''
    }
  },
  computed: {
    ...mapState({
      userMenus: state => state.userMenus
    })
  },
  created() {
    this.getGridPersonCount()
    this.getEventCount()
  },
  methods: {
    routerClick(val) {
      // if (val.text === '学习自测') {
      //   const index = this.userMenus.findIndex(o => o.name === '学习自测')
      //   if (index > -1) {
      //     window.location = 'http://223.83.150.169:83/'
      //   } else {
      //     this.$toast('暂无权限')
      //   }
      // } else {
      this.$router.push({ path: val.path })
      // }
    },
    getGridPersonCount() {
      Resident.Init.count().then(res => {
        const { status, data } = res.data
        if (status === 0) this.gridPerson = data
      })
    },
    getEventCount() {
      Event.Init.count().then(res => {
        const { status, data } = res.data
        if (status === 0) this.gridEvent = data
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/home/index.less';
</style>
